<template>
	<view class="leave-record-container">
		<view class="header">
			<view class="title">请假记录</view>
			<view class="subtitle">查看历史请假申请及审批状态</view>
		</view>
		
		<view class="records-list">
			<!-- 空状态显示 -->
			<view v-if="leaveRecords.length === 0" class="empty-state">
				<image src="../../static/imges/empty.png" class="empty-icon"></image>
				<text>暂无请假记录</text>
			</view>
			
			<!-- 请假记录列表 -->
			<view 
				v-for="(record, index) in leaveRecords" 
				:key="index" 
				class="record-card"
				:class="{'pending-card': record.state == 0, 'approved-card': record.state == 1, 'rejected-card': record.state == 2}"
			>
				<view class="card-header">
					<view class="status-badge" :class="{'pending': record.state == 0, 'approved': record.state == 1, 'rejected': record.state == 2}">
						<text class="status-dot"></text>
						<text>{{ stateToText(record) }}</text>
					</view>
					<view class="date-range">
						{{ formatDateRange(record.startDate, record.endDate) }}
					</view>
				</view>
				
				<view class="card-content">
					<view class="info-item">
						<view class="info-label">
							<image src="../../static/imges/calendar-start.png" class="info-icon"></image>
							<text>开始时间</text>
						</view>
						<view class="info-value">{{ record.startDate }}</view>
					</view>
					
					<view class="info-item">
						<view class="info-label">
							<image src="../../static/imges/calendar-end.png" class="info-icon"></image>
							<text>结束时间</text>
						</view>
						<view class="info-value">{{ record.endDate }}</view>
					</view>
					
					<view class="info-item reason-item">
						<view class="info-label">
							<image src="../../static/imges/reason.png" class="info-icon"></image>
							<text>请假理由</text>
						</view>
						<view class="info-value reason-value">{{ record.reason }}</view>
					</view>
				</view>
				
				<view class="card-footer" v-if="record.state == 0">
					<text class="footer-text">等待审批中...</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/utils/request.js'
	export default {
		data() {
			return {
				leaveRecords: []
			}
		},
		methods: {
			getAll() {
				request.post('/studentLeave/list')
					.then(res => {
						console.log('请假记录数据:', res.data);
						this.leaveRecords = res.data || [];
					})
					.catch(err => {
						console.error('获取请假记录失败:', err);
						uni.showToast({
							title: '获取记录失败',
							icon: 'none'
						});
					});
			},
			stateToText(record){
				if(record.state == 0){
					return '未审批';
				}
				
				if(record.state == 1){
					return '通过';
				}
				
				if(record.state == 2){
					return '拒绝';
				}
				
				return '未知状态';
			},
			formatDateRange(start, end) {
				// 简化日期显示，只保留月日
				const formatDate = (dateStr) => {
					if (!dateStr) return '';
					try {
						const date = new Date(dateStr);
						return `${date.getMonth() + 1}月${date.getDate()}日`;
					} catch (e) {
						console.error('日期格式化错误:', e);
						return dateStr;
					}
				};
				
				if (!start || !end) return '';
				return `${formatDate(start)} - ${formatDate(end)}`;
			}
		},
		onLoad() {
			this.getAll();
		},
		created() {
			// 确保数据加载
			if (this.leaveRecords.length === 0) {
				this.getAll();
			}
		}
	}
</script>

<style>
	.leave-record-container {
		min-height: 100vh;
		background-color: #f5f7fa;
		padding-bottom: 30rpx;
	}
	
	.header {
		background: linear-gradient(to right, #4f99ff, #6ba6ff);
		padding: 40rpx 30rpx 60rpx;
		color: #fff;
		border-bottom-left-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(79, 153, 255, 0.2);
	}
	
	.title {
		font-size: 40rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}
	
	.subtitle {
		font-size: 28rpx;
		opacity: 0.9;
	}
	
	.records-list {
		padding: 20rpx 30rpx;
		margin-top: -30rpx;
	}
	
	.record-card {
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		margin-bottom: 20rpx;
		overflow: hidden;
		border-left: 4rpx solid #ddd;
		transition: all 0.3s;
	}
	
	.pending-card {
		border-left-color: #1890ff;
	}
	
	.approved-card {
		border-left-color: #52c41a;
	}
	
	.rejected-card {
		border-left-color: #ff4d4f;
	}
	
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		border-bottom: 1px solid #f0f0f0;
	}
	
	.status-badge {
		display: flex;
		align-items: center;
		padding: 6rpx 20rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
		font-weight: 500;
	}
	
	.status-dot {
		display: inline-block;
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}
	
	.status-badge.pending {
		background-color: #e6f7ff;
		color: #1890ff;
	}
	
	.status-badge.pending .status-dot {
		background-color: #1890ff;
	}
	
	.status-badge.approved {
		background-color: #f6ffed;
		color: #52c41a;
	}
	
	.status-badge.approved .status-dot {
		background-color: #52c41a;
	}
	
	.status-badge.rejected {
		background-color: #fff2f0;
		color: #ff4d4f;
	}
	
	.status-badge.rejected .status-dot {
		background-color: #ff4d4f;
	}
	
	.date-range {
		font-size: 26rpx;
		color: #999;
	}
	
	.card-content {
		padding: 20rpx 30rpx;
	}
	
	.info-item {
		display: flex;
		margin-bottom: 20rpx;
	}
	
	.info-label {
		display: flex;
		align-items: center;
		width: 180rpx;
		font-size: 26rpx;
		color: #666;
	}
	
	.info-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 10rpx;
	}
	
	.info-value {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}
	
	.reason-item {
		align-items: flex-start;
	}
	
	.reason-value {
		line-height: 1.6;
	}
	
	.card-footer {
		padding: 16rpx 30rpx;
		background-color: #fafafa;
		border-top: 1px solid #f0f0f0;
		text-align: center;
	}
	
	.footer-text {
		font-size: 24rpx;
		color: #999;
	}
	
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
		color: #999;
		font-size: 28rpx;
	}
	
	.empty-icon {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 20rpx;
		opacity: 0.5;
	}
</style>